<template>
  <dpro-modal
    :destroyOnClose="true"
    class="preview-img-modal"
    :class="{'last-img-modal':cardType===2}"
    :title="cardType===1?'告警详情':'图片预览'"
    :width="'fit-content'"
    :visible="visible"
    :footer="null"
    @cancel="close"
    :getContainer="getContainer"
    >
    <div v-if="cardType===2"  class="preview-img-middle">
      <div class="preview-img-box">
        <img v-if="previewImg" :src="previewImg" />
        <div v-else class="nodata pic__image-small pr">加载中, 请重新刷新...</div>
      </div>
    </div>
    <div v-if="cardType===1" class="alert-detail-content">
      <div class="alert-detail-left">
        <img v-if="picInfo.bgImageUrl" @click="$emit('img-click', picInfo.bgImageUrl)" class="single-img" :src="picInfo.bgImageUrl" alt="img" @error="imageOnError('bgImageUrl')" />
        <div v-else class="nodata pic__image-small pr">加载中...</div>
      </div>
      <div class="alert-detail-right">
        <div class="img-wrapper flex-align-center">
          <div class="car-img-box">
            <img v-if="picInfo.catchPatImageUrl" @click="$emit('img-click', picInfo.catchPatImageUrl)" class="car-img" :src="picInfo.catchPatImageUrl" alt="img" />
            <div v-else class="nodata pic__image-small pr">加载中...</div>
            <div class="img-desc">{{picInfo.alarmType===1?"黑名单":picInfo.alarmType===2?"陌生车辆":"车牌颜色"}}</div>
          </div>
        </div>
        <div class="desc-item flex-align-center">
          <span class="label">车牌号</span>
          <span class="value">{{ picInfo.carNumName }}</span>
        </div>
        <div class="desc-item flex-align-center gap">
          <span class="label">告警时间</span>
          <span class="value" >{{ picInfo.alarmTime }}</span>
        </div>
        <div class="desc-item flex-align-center">
          <span class="label">设备名</span>
          <span class="value" >{{ picInfo.deviceName || '' }}</span>
        </div>
        <div class="desc-item flex-align-center">
          <span class="label">设备码</span>
          <span class="value">{{ picInfo.deviceCode || '' }}</span>
        </div>
      </div>
    </div>
    <div class="alert-detail-footer">
      <dpro-button v-if="cardType===1" class="alert-detail-footer-btn" type="primary" @click.native="close">好 的</dpro-button>
    </div>
  </dpro-modal>
</template>

<script>
import { DproModal, DproButton } from "../../components/index";

export default {
  name: "pic-modal",
  props:{
    cardType: {
      type: Number,
      default: 1
    },
    getContainer: {
      type: Function,
      default: () => document.body
    },
    cardInfo: {
      type: Object
    }
  },
  data() {
    return {
      visible: false,
      picInfo: {},
      previewImg: ''
    };
  },
  computed: {
    imgSrc() {
      return this.picInfo?.img || "";
    },
  },
  created() {
  },
  methods: {
    open(option) {
      this.picInfo = option
      this.visible = true;
    },
    /**
     * 打开弹窗或者关闭弹窗时通过修改卡片容器的z-index来解决弹窗层级的问题
     * @param {Boolean} back 是否重置z-index，关闭弹窗时传true
     */
     setZindex(back = false) {
      typeof(window.handleCardZIndex) === 'function' && window.handleCardZIndex({cardId: this.cardInfo.cardId, index: this.cardInfo.index, back});
    },
    openPreview(imageUrl) {
      this.previewImg = imageUrl;
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    //图片损毁时触发
    imageOnError(type,item){
      item[type] = null
    },
  },
  watch: {
    visible(val) {
      if(this.cardType === 1 && val) this.setZindex(!val)
      if(this.cardType === 2) this.setZindex(!val)
    }
  },
  components: { DproModal, DproButton },
};
</script>

<style lang="less" scoped>
@import url("./dp-modal.less");
</style>
